<template>
    <view class="w-[375px] flex flex-col items-center gap-3 mt-3">
        <!-- 同类产品推荐区域 -->
        <view class="w-[350px] mx-auto">
            <view class="text-24 font-semibold mb-2">同类产品推荐</view>
            <view class="grid grid-cols-4 gap-3">
                <view class="flex flex-col items-center w-full" v-for="(product, index) in products" :key="index">
                    <view class="w-full h-[90px] bg-gray-200 rounded-lg"></view>
                    <text class="mt-2 text-[12px] text-gray-800 truncate">产品名称</text>
                </view>
            </view>
            <view class="flex justify-end text-[9px] color-[#999] mt-2" v-if="props.hasPrice">
                <text class="">小计：</text>
                <text class="text-red-500">¥{{ 0 }}</text>
            </view>
        </view>

        <!-- 相关视频区域 -->
        <view class="w-[350px] mx-auto mb-4">
            <view class="text-24 font-semibold mb-2">相关视频</view>
            <view class="grid grid-cols-3 gap-3">
                <view class="w-full" v-for="(video, index) in videos" :key="index">
                    <view class="w-full h-[70px] bg-black rounded-lg"></view>
                </view>
            </view>
            <view class="flex justify-end text-[9px] color-[#999] mt-2" v-if="props.hasPrice">
                <text class="">小计：</text>
                <text class="text-red-500">¥{{ 0 }}</text>
            </view>

        </view>

       
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Checkbox } from '@nutui/nutui-taro';
// import checkIcon from '@/assets/ico/check.png'

import { defineModel } from 'vue'

// 定义 model 变量（自动关联 props 和事件）
const model = defineModel()
const { modelValue } = model
const props = defineProps({
    hasPrice: {
        type: Boolean,
        default: true
    }
})

// 更新父组件数据
const updateValue = (e) => {
  model.value = e.target.value
}

const products = ref([1, 2, 3, 4]);
const videos = ref([1, 2, 3]);
const footerLinks = ref([
    { text: '服务须知' },
    { text: '知情同意书' },
    { text: '风险告知书' },
    { text: '收费说明' }
]);

// const checked = ref(false);
const handleChange = (value) => {
    console.log(value); // true or false
    // checked.value = value;
    model.value = value
};
</script>
